<template>
  <div class="main relative" ref="main">
    <BasicModal
      v-bind="$attrs"
      :centered="true"
      :useWrapper="true"
      :wrapperFooterOffset="-99"
      width="1130px"
      @register="registerModal"
      :getContainer="() => $refs.main"
      :showCancelBtn="false"
      :showOkBtn="false"
    >
      <div class="w-full h-40 absolute -top-62">
        <p class="absolute z-100 text-[20px] text-white top-30 left-5"
          >站点名称：{{ info?.site_name }}</p
        >
        <p class="absolute z-100 text-[16px] text-white top-45 left-5">
          <span>账单月份: {{ toTimezone(info?.time, 'YYYY年MM月') }}</span>
          <span class="ml-20">所属集团: {{ info?.group_name }}</span>
          <span class="ml-20">站点代号: {{ info?.prefix }}</span>
        </p>
      </div>

      <div class="mt-5 p-5">
        <div>
          <Steps :current="setNum">
            <Step title="生成帐单">
              <template #description>
                <p>{{ toTimezone(info?.time, 'YYYY年MM月') }}</p>
              </template>
            </Step>
            <Step title="待核对">
              <template #description> </template>
            </Step>
            <Step title="待支付" />
            <Step title="已完成" />
          </Steps>
        </div>

        <div>
          <a-descriptions :column="4" bordered layout="vertical">
            <a-descriptions-item label="平台费用(U)"> {{ info?.base_fee }}</a-descriptions-item>
            <a-descriptions-item label="线路维护费(U)">
              {{ info?.line_maintenance_fee }}
            </a-descriptions-item>
            <a-descriptions-item label="CDN超额费(U)">
              {{ info?.cdn_overage_fee }}
            </a-descriptions-item>
            <a-descriptions-item label="域名超额费(U)">
              {{ info?.domain_overage_fee }}</a-descriptions-item
            >

            <a-descriptions-item label="账单结算币种"> {{ info?.name }}</a-descriptions-item>
            <a-descriptions-item label="折扣费用(U)">
              {{ info?.discounted_fee }}
            </a-descriptions-item>
            <a-descriptions-item label="实际交收费用(U)">
              <span style="color: #d9001b">{{ info?.actual_settlement_fee }}</span>
            </a-descriptions-item>
            <a-descriptions-item>
              <template #label>
                <span
                  >账单状态
                  <span
                    >(<span class="primary-color cursor" @click="openRemark(info, 1)">历史记录</span
                    >)</span
                  ></span
                >
              </template>
              <span
                :style="{
                  color: info?.state == 3 ? '#D9001B' : info?.state == 4 ? '#63A103' : '#F59A23',
                }"
              >
                {{ siteBillStatus[info?.state] }}</span
              >
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="mt-3">
          <Card title="平台费用详情" bordered v-bind="$attrs" :bodyStyle="{ padding: '20px' }">
            <div class="flex mb-2">
              <RadioGroup
                class="currentListGroup"
                v-model:value="currency_id"
                button-style="solid"
                @change="changeButtonDayEChartsOverView"
              >
                <RadioButton
                  v-for="(item, index) in currentList"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </RadioButton>
              </RadioGroup>
            </div>
            <BasicTable @register="registerTable">
              <template #remarkDiv="{ record }">
                <span
                  v-if="record.remark"
                  class="primary-color cursor"
                  @click="openRemark(record, 2)"
                  >查看备注</span
                >
                <span v-else>- </span>
              </template>
              <template #summary>
                <TableSummary fixed>
                  <TableSummaryRow>
                    <TableSummaryCell class="!text-center !text-sm" :index="0">
                      汇总小计
                    </TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">{{
                      settlement
                    }}</TableSummaryCell>
                    <TableSummaryCell class="!text-center !text-sm">-</TableSummaryCell>
                  </TableSummaryRow>
                </TableSummary>
              </template>
            </BasicTable>
          </Card>
        </div>
      </div>
      <remarkModal @register="registerMark" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import {
    Steps,
    Descriptions,
    Card,
    RadioGroup,
    RadioButton,
    TableSummary,
    TableSummaryRow,
    TableSummaryCell,
  } from 'ant-design-vue';
  import { getFormattedMonthFromTimestamp, toTimezone } from '@/utils/dateUtil';
  import { useSiteBillStatus } from '/@/views/system/common/const';
  import { useTreeListStore } from '/@/store/modules/treeList';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { columns } from './siteBillDetail.data';
  import remarkModal from './remarkModal.vue';
  import { useModal } from '/@/components/Modal';
  import { getSiteBillDetail } from '@/api/sys';
  import dayjs from 'dayjs';

  export default defineComponent({
    name: 'SafeGuardModal',
    components: {
      BasicModal,
      Steps,
      Step: Steps.Step,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      Card,
      RadioGroup,
      RadioButton,
      BasicTable,
      remarkModal,
      TableSummary,
      TableSummaryRow,
      TableSummaryCell,
    },
    setup() {
      const { siteBillStatus } = useSiteBillStatus();
      const info: any = ref(null);
      const setNum = ref(0);
      const currency_id = ref('' as string);
      const dataSource = ref([]);
      const tabSource = ref([]);
      const getTime = ref('');
      const settlement = ref('0' as any);
      const { currencyTreeList } = useTreeListStore();
      const currentList = ref([{ label: '汇总', value: 'all' }] as any);
      const [registerMark, { openModal: openRemarkModal }] = useModal();
      const [registerModal, { setModalProps, closeModal }] = useModalInner(
        async ({ record, data }) => {
          reload();
          getTime.value = record.time;
          info.value = record;
          //info.value.time = getFormattedMonthFromTimestamp(info.value.time);
          setNum.value = info.value.state - 1;
          const infoItem = currencyTreeList.find((el: any) => el.id == info.value.currency_id);
          if (infoItem) {
            info.value.name = infoItem.name;
          }
          const row = getRawDataSource();
          currentList.value = [{ label: '汇总', value: '' }].concat(
            currencyTreeList.filter((item) => row.n.includes(item.id)),
          );
          //dataSource.value = data.d;
          dataSource.value.forEach((item) => {
            const matchedItem = currencyTreeList.find((el: any) => el.id == item.currency_id);
            if (matchedItem) {
              item.name = matchedItem.name;
            }
          });
          const dataList = getRawDataSource();
          setModalProps({ confirmLoading: false });
        },
      );

      const [registerTable, { reload, setTableData, getRawDataSource }] = useTable({
        columns,
        useSearchForm: false,
        bordered: true,
        showIndexColumn: false,
        api: getSiteBillDetail,
        //immediate: false,
        beforeFetch: (params) => {
          const date = toTimezone(getTime.value); // '2024-02-21'
          const startTime = dayjs(date).startOf('day').format('YYYY-MM-DD HH:mm:ss'); // 转换为 '2024-02-21 00:00:00'
          const endTime = dayjs(date).endOf('day').format('YYYY-MM-DD HH:mm:ss'); // 转换为 '2024-02-21 23:59:59'
          params['id'] = info.value.id;
          params['start_time'] = startTime;
          params['end_time'] = endTime;
          params['currency_id'] = currency_id.value;
        },
        afterFetch: () => {
          const row = getRawDataSource();
          currentList.value = [{ label: '汇总', value: '' }].concat(
            currencyTreeList.filter((item) => row.n.includes(item.id)),
          );
          settlement.value = row?.c[0].settlement_fee;
        },
      });

      async function changeButtonDayEChartsOverView(v) {
        currency_id.value = v.target.value;
        reload();
      }

      // function processSource(id) {
      //   console.log(id);
      //   if (id == 'all') tabSource.value = dataSource.value;
      //   else tabSource.value = dataSource.value.filter((el: any) => el.currency_id === id);
      // }

      function openRemark(data, type) {
        if (type == 1) openRemarkModal(true, { data: data.history, type });
        else openRemarkModal(true, { data: data.remark, type });
      }

      return {
        registerModal,
        info,
        setNum,
        siteBillStatus,
        currentList,
        currency_id,
        changeButtonDayEChartsOverView,
        registerTable,
        registerMark,
        openRemark,
        settlement,
        toTimezone,
      };
    },
  });
</script>
<style lang="less" scoped>
  .main {
    ::v-deep(.ant-modal-header) {
      width: 1130px;
      height: 160px;
      border-bottom: none;
      background-attachment: scroll;
      background-color: transparent !important;
      background-color: rgb(24 145 255) !important;
      background-image: url('../../../../../../../assets/images/bg.svg');
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 1440px 623px;
      box-shadow: rgb(0 0 0 / 24.7%) 0 0 10px;
      background-origin: border-box;

      .vben-basic-title {
        color: white;
        font-size: 28px;
      }
    }

    ::v-deep(.ant-modal-body) {
      .scrollbar__wrap {
        border: 0;
      }

      .scrollbar {
        padding: 0;
      }
    }

    ::v-deep(.ant-modal-footer) {
      border: 0;
      background-color: white;
    }

    ::v-deep(.ant-modal-content) {
    }

    ::v-deep(.ant-modal-close-x) {
      color: white;
    }

    ::v-deep(.scrollbar) {
      overflow: visible;
    }

    .info-body {
      border-top: 1px solid #e5e5e5;
      border-left: 1px solid #e5e5e5;
      color: #666;

      & > div {
        width: 25%;

        & > div:nth-of-type(1) {
          background-color: #f2f2f2;
          font-size: 16px;
        }

        div {
          height: 50px;
          padding-left: 15px;
          border-right: 1px solid #e5e5e5;
          border-bottom: 1px solid #e5e5e5;
          line-height: 50px;

          input {
            line-height: 25px;
          }
        }
      }
    }

    ::v-deep(.ant-modal-wrap) {
      overflow: visible;
    }

    ::v-deep(.ant-table-content) {
      table {
        font-size: 12px;
      }
    }

    ::v-deep(.vben-basic-table) {
      padding: 0 13px;

      .ant-table-title {
        padding: 13px 13px 0;
        background-color: #f9f9f9;

        h2 {
          font-size: 17px;
        }
      }
    }
  }

  .customize {
    ::v-deep(.ant-modal-header) {
      display: none;
    }
  }
</style>
